听说今天是七夕，那我们写一个网页开发来庆祝一下

今天是七夕佳节，是中国传统的情人节，

逢此佳节，博主也来写一个网页开发来庆祝一下七夕，

虽然博主是下图的情况：

但是，

正是处于这种情况，

才会有闲心来搞一些事情了啦~~

本项目中，我们使用了 Node 的 Express 框架，以此作为服务器后端，然后在前段，我们使用模板进行代码的编写，这样可以省去很多不必要的代码了啦。

然后，最终的成果是一个前端再加一个服务器，这里我们没有使用 Git， 只不过使用他来做了一个记录，没有远程仓库。

在项目的index.js 中： （这个是实现Node服务器）

let formidable = require("formidable")let handlebars = require("express3-handlebars").create({defaultLayout: "main"})

app.use(require("body-parser")())

app.use(express.static(__dirname + "/public"))

app.engine("handlebars", handlebars.engine)app.set("view engine", "handlebars")app.set("port", process.env.PORT || 3000)

app.get("/end", (req, res)=>{ res.render("end")})

// app.get("/thirteenth", (req, res)=>{ // res.render("thirteenth")// })

app.get("/thirteenth", (req, res)=>{ res.render("thirteenth")})

app.get("/twelfth", (req, res)=>{ res.render("twelfth")})

app.get("/eleventh", (req, res)=>{ res.render("eleventh")})

app.get("/tenth", (req, res)=>{ res.render("tenth")})

app.get("/nineth", (req, res)=>{ res.render("nineth")})

app.get("/eighth", (req, res)=>{ res.render("eighth")})

app.get("/seventh", (req, res)=>{ res.render("seventh")})

app.get("/sixth", (req, res)=>{ res.render("sixth")})

app.get("/fifth", (req, res)=>{ res.render("fifth")})

app.get("/forth", (req, res)=>{ res.render("forth")})

app.get("/third", (req, res)=>{ res.render("third")})

app.get("/second", (req, res)=>{ res.render("second")})

app.get("/first", (req, res)=>{ res.render("first")})

// get / -> home// app.get("/", (req, res)=>{// res.render("home")// })

app.get("/", (req, res)=>{ res.render("home")})

app.use((req, res)=>{ res.status(404) res.render("404")})

app.use((err, req, res, next)=>{ console.log(err.static) res.static(500) res.render("500")})

app.listen(app.get("port"), ()=>{ console.log("Express start on http://localhost:" + app.get("port") + ";press Ctrl - C to terminate......")})

而在 模板 main.handlebrs 中： （这是一个主模板）

{{!-- /*basic reset*/*{margin:0;padding:0;}body{background:black;}canvas{display:block;} --}}

至于在 home.handlebars 中： （这是主页）

然后，在 后面的一些模板文件中也是类似的，我们此处只展示另外一个模板文件，first.handlebars 中: （这是第一个图像）

最后，还有最后一个 end.handlebars 中： （这是最后一个图像）

整个项目的 JSON 文件为：

以上就是我们的整个项目的一些代码。

本项目最核心的代码是服务器的构建，以及最后一个图像的绘制：

服务器：

let formidable = require("formidable")let handlebars = require("express3-handlebars").create({defaultLayout: "main"})

app.use(require("body-parser")())

app.use(express.static(__dirname + "/public"))

app.engine("handlebars", handlebars.engine)app.set("view engine", "handlebars")app.set("port", process.env.PORT || 3000)

app.get("/end", (req, res)=>{ res.render("end")})

// app.get("/thirteenth", (req, res)=>{ // res.render("thirteenth")// })

app.get("/thirteenth", (req, res)=>{ res.render("thirteenth")})

app.get("/twelfth", (req, res)=>{ res.render("twelfth")})

app.get("/eleventh", (req, res)=>{ res.render("eleventh")})

app.get("/tenth", (req, res)=>{ res.render("tenth")})

app.get("/nineth", (req, res)=>{ res.render("nineth")})

app.get("/eighth", (req, res)=>{ res.render("eighth")})

app.get("/seventh", (req, res)=>{ res.render("seventh")})

app.get("/sixth", (req, res)=>{ res.render("sixth")})

app.get("/fifth", (req, res)=>{ res.render("fifth")})

app.get("/forth", (req, res)=>{ res.render("forth")})

app.get("/third", (req, res)=>{ res.render("third")})

app.get("/second", (req, res)=>{ res.render("second")})

app.get("/first", (req, res)=>{ res.render("first")})

// get / -> home// app.get("/", (req, res)=>{// res.render("home")// })

app.get("/", (req, res)=>{ res.render("home")})

app.use((req, res)=>{ res.status(404) res.render("404")})

app.use((err, req, res, next)=>{ console.log(err.static) res.static(500) res.render("500")})

app.listen(app.get("port"), ()=>{ console.log("Express start on http://localhost:" + app.get("port") + ";press Ctrl - C to terminate......")})

最后一个图像的绘制

主页如下：

（点击屏幕会继续向后进行继续）

其他的页面：

图 1

图 2

图 3

图 4

图 5

图 6

结尾的页面：

（

这个四无限的屏幕刷屏显示， 同时还配有音乐，我配的是Star Sky

）

如果需要源代码的话，可以在我的资源哪里进行下载了啦

啊，虽然博主做了一个七夕的小项目，但是呢，又没有人可以送，于是就在这里进行分享了啦。

曾经，博主还在一直思考，为什么博主这么菜，什么都不会，也没有npy，后来。。。。。。

同时，常常记得另一个博主的TCP讲解：

。。。。。

最后，谢谢大家的阅读了

谢谢支持！！

（づ￣3￣）づ╭❤～

喜欢的话就留下来点个赞呗~~